<template>
  <div>
    <el-form :inline="true" :model="searchData">
      <el-form-item label="红娘姓名">
        <el-input
          v-model="searchData.realname"
          clearable
          placeholder="输入红娘姓名"
        />
      </el-form-item>
      <el-form-item label="红娘电话">
        <el-input
          v-model="searchData.phone"
          clearable
          placeholder="输入红娘电话"
        />
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker
          v-model="searchData.cdate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择日期"
          clearable
        />
      </el-form-item>
      <!-- 查询按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
interface IProps {
  currentPage: number;
  loadData: (page: number, search: Record<string, string>) => Promise<void>;
}

const props = defineProps<IProps>();

const searchData = reactive({
  phone: "",
  realname: "",
  cdate: "",
});
const onSubmit = () => {
  console.log(searchData)
  console.log(props.currentPage)
  props.loadData(props.currentPage, searchData)
}
</script>

<style scoped lang="scss">
.search {
  // margin-left: 2px;

  // margin-top: -2px;
}
</style>
